<template>
  <div :class="{ 'isError': isError }" class="select-custom-user-wrap" @click="addSender">
    <div v-if="selectData.length > 0" class="tag-item" style="padding: 0 4px 0px 10px;">
      <span class="ellipsis">{{ displaySelect.userName }}</span>
      <i class="el-icon-error " @click.stop="remove(displaySelect.id)" />
    </div>
    <div v-if="selectData.length > 1" class="tag-item">
      + {{ selectData.length - 1 }}
    </div>
    <div v-if="showRemoveAll && selectData.length > 1" class="clear-all">
      <i class="el-icon-error " @click.stop="removeAll()" />
    </div>
    <div v-if="!selectData || selectData && selectData.length === 0" class="emtpy-text">{{ placeholder }}</div>
    <divers-auditor-dialog ref="auditorDialog" :max-num="maxNum" :include-leaver="includeLeaver" @userSelect="userSelect" />
  </div>
</template>
<script>
import DiversAuditorDialog from '@/components/Common/auditProcess/module/diversAuditorDialog';

export default {
  name: 'SelectCustomUser',
  components: { DiversAuditorDialog },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    },
    diyUserItemList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    placeholder: {
      type: String,
      default: '请选择抄送人'
    },
    dialogTitle: {
      type: String,
      default: '添加自定义人员'
    },
    isError: {
      type: Boolean,
      default: false
    },
    maxNum: {
      type: Number,
      default: 50
    },
    showRemoveAll: {
      type: Boolean,
      default: false
    },
    includeLeaver: { // 是否包含已离职人员
      type: Number,
      default: 0
    }
  },
  computed: {
    displaySelect() {
      if (this.diyUserItemList.length > 0) {
        return this.diyUserItemList[0];
      } else {
        return '';
      }
    },
    selectData: {
      get() {
        return this.value || [];
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    addSender() {
      this.$refs.auditorDialog.dialogVisible = true;
      this.$refs.auditorDialog.initSenderData(this.diyUserItemList, this.dialogTitle);
    },
    userSelect(param) {
      this.selectData = param.selectUser.map(item => item.id);
      this.$emit('update:diyUserItemList', param.selectUser);
    },
    remove(id) {
      const temp = JSON.parse(JSON.stringify(this.diyUserItemList));
      const ids = this.selectData;
      const curIndex = ids.indexOf(id);
      if (curIndex >= 0) {
        temp.splice(curIndex, 1);
      }
      this.selectData = temp.map(item => item.id);
      this.$emit('update:diyUserItemList', temp);
    },
    removeAll() {
      this.$emit('removeAllUser');
    }
  }
};
</script>
<style lang="scss" scoped>
.select-custom-user-wrap {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  width: 240px;
  cursor: pointer;
  .tag-item {
    height: 20px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #ecf1ff;
    color: #406eff;
    line-height: 1;
    margin-right: 6px;
    border-radius: 4px;
    span {
      margin-right: 4px;
      max-width: 120px;
    }
    .el-icon-error {
      cursor: pointer;
      color: #C0C4CC;
    }
  }
  .clear-all {
    flex: 1;
    text-align: right;
  }
  &.isError {
    border-color: red;
  }
  .emtpy-text {
    color: #ddd;
    font-size: 14px;
  }
}
</style>
